<template>
  <div class="big-screen-box-details">
    <el-button type="primary" class="back-btn" @click="$router.go(-1)" plain>返回</el-button>
    <el-row class="screen-header" justify="space-evenly" align="middle">
      <el-col :span="6">
        <div class="left-date-box">
          <p class="date-p"> {{ currentTime }}</p>
          <p class="week-p">{{ weekDay }}</p>
        </div>
      </el-col>
      <el-col :span="8">
        <h2 class="screenTitle">{{ screenTitle }}</h2>
        <!-- mqtt 测试 -->
        <!-- <mqtt /> -->
      </el-col>
      <el-col :span="6">

      </el-col>
    </el-row>

    <el-row :gutter="14">
      <el-col :span="24">
        <div class="screen-right-box">
          <!-- 第一层 -->
          <el-row :gutter="6" class="screen-right-item-level h466">
            <el-col :span="16">
              <div class="level-top-box flex screen-border-style h226 mb6">
                <div class="level-top-left-box">
                  <div class="level-top-left-title"><span>商品名字</span><span>直播标题在这里显示</span> </div>
                  <div class="num-box ">
                    <!-- 销售额 -->
                    <div v-for="item in numData">
                      {{ item }}
                    </div>
                  </div>
                  <div class="progress-bar-info">
                    <div><span>总目标：</span><span class="font-color-yellow">￥132132</span></div>
                    <div><span>目标完成：</span><span class="font-color-yellow">{{ barWidth }}%</span></div>
                  </div>

                  <div class="progress-bar">
                    <div :style="`width:${barWidth}%`" class="progress-bar-item"></div>
                    <!-- <div v-for="(item, index) in nums4" :key="index" class="progress-bar-item-box "></div> -->
                  </div>
                </div>
                <div class="level-top-right-box bar-item-four">
                  <div>
                    <p class="title">直播曝光次数

                      <el-popover placement="top-start" effect="dark" :width="200" trigger="hover" content="直播曝光次数">
                        <template #reference>
                          <el-icon :size="14">
                            <QuestionFilled />
                          </el-icon>
                        </template>
                      </el-popover>
                    </p>
                    <p class="nums">
                      <span class="font-color-yellow">1456</span>
                    </p>
                  </div>

                  <div>
                    <p class="title">曝光点击率

                      <el-popover placement="top-start" effect="dark" :width="200" trigger="hover" content="直播曝光次数">
                        <template #reference>
                          <el-icon :size="14">
                            <QuestionFilled />
                          </el-icon>
                        </template>
                      </el-popover>
                    </p>
                    <p class="nums">
                      <span class="font-color-yellow">89.64%</span>
                    </p>
                  </div>
                  <div>
                    <p class="title">次均观看时长

                      <el-popover placement="top-start" effect="dark" :width="200" trigger="hover" content="直播曝光次数">
                        <template #reference>
                          <el-icon :size="14">
                            <QuestionFilled />
                          </el-icon>
                        </template>
                      </el-popover>
                    </p>
                    <p class="nums">
                      <span class="font-color-yellow">1分25秒</span>
                    </p>
                  </div>

                  <div>
                    <p class="title">单位观看时长成交率
                      <el-popover placement="top-start" effect="dark" :width="200" trigger="hover" content="直播曝光次数">
                        <template #reference>
                          <el-icon :size="14">
                            <QuestionFilled />
                          </el-icon>
                        </template>
                      </el-popover>
                    </p>
                    <p class="nums">
                      <span class="font-color-yellow">0.13元/分钟</span>
                    </p>
                  </div>

                  <div>
                    <p class="title">累计观看人数
                      <el-popover placement="top-start" effect="dark" :width="200" trigger="hover" content="直播曝光次数">
                        <template #reference>
                          <el-icon :size="14">
                            <QuestionFilled />
                          </el-icon>
                        </template>
                      </el-popover>
                    </p>
                    <p class="nums">
                      <span class="font-color-yellow">65,581</span>
                    </p>
                  </div>

                  <div>
                    <p class="title">支付转化率
                      <el-popover placement="top-start" effect="dark" :width="200" trigger="hover" content="直播曝光次数">
                        <template #reference>
                          <el-icon :size="14">
                            <QuestionFilled />
                          </el-icon>
                        </template>
                      </el-popover>
                    </p>
                    <p class="nums">
                      <span class="font-color-yellow">1.78%</span>
                    </p>
                  </div>
                  <div>
                    <p class="title">客单价
                      <el-popover placement="top-start" effect="dark" :width="200" trigger="hover" content="直播曝光次数">
                        <template #reference>
                          <el-icon :size="14">
                            <QuestionFilled />
                          </el-icon>
                        </template>
                      </el-popover>
                    </p>
                    <p class="nums">
                      <span class="font-color-yellow">17.59元 </span>
                    </p>
                  </div>

                  <div>
                    <p class="title">退款金额
                      <el-popover placement="top-start" effect="dark" :width="200" trigger="hover" content="直播曝光次数">
                        <template #reference>
                          <el-icon :size="14">
                            <QuestionFilled />
                          </el-icon>
                        </template>
                      </el-popover>
                    </p>
                    <p class="nums">
                      <span class="font-color-yellow">1456</span>
                    </p>
                  </div>

                  <div>
                    <p class="title">上车商品数</p>
                    <p class="nums">
                      <span class="font-color-yellow">6</span>
                    </p>
                  </div>

                  <div>
                    <p class="title">商品下单量</p>
                    <p class="nums">
                      <span class="font-color-yellow">1456</span>
                    </p>
                  </div>
                  <div>
                    <p class="title">成交件数</p>
                    <p class="nums">
                      <span class="font-color-yellow">1456</span>
                    </p>
                  </div>

                  <div>
                    <p class="title">商品成交金额</p>
                    <p class="nums">
                      <span class="font-color-yellow">￥1321321456</span>
                    </p>
                  </div>
                </div>
              </div>
              <div class="level-top-box flex screen-border-style h226 mb6">
                <div class="level-top-left-box2">
                  <div class="level-top-left-box-content">
                    <div class="level-top-left-box-title">流量指标</div>
                    <div class="level-top-left-btn-box hover-font-yellow">
                      <div>实时观看人数</div>
                      <div>实时离开人数</div>
                      <div>实时进入人数</div>
                      <div>分渠道观看人数</div>
                      <div>直播推荐</div>
                    </div>
                  </div>

                  <div class="level-top-left-box-content">
                    <div class="level-top-left-box-title">转化指标</div>
                    <div class="level-top-left-btn-box hover-font-blue">
                      <div>实时成交金额</div>
                      <div>成交订单数</div>
                      <div>成交人数</div>
                      <div>千次观看成交金额</div>
                      <div>新增评论数</div>
                      <div>新增粉丝数</div>
                    </div>
                  </div>

                </div>
                <div class="level-top-right-box2">
                  <h3 class="screen-title-box left-10 mb30 ">直播趋势图</h3>
                  <line_char3 :styleClass="{ height: '190px' }" :chartData="ring1Data" class="ring_char_box" />
                </div>
              </div>
            </el-col>

            <el-col :span="8">

              <div class="screen-left-bar screen-border-style h458">
                <h3 class="screen-title-box mb30">用户画像</h3>
                <div class="bar-item-two">
                  <div>
                    <p class="title">新增粉丝数</p>
                    <p class="nums">
                      <span class="font-color-yellow">1456</span>
                    </p>
                  </div>

                  <div>
                    <p class="title">粉丝复购率</p>
                    <p class="nums"><span>15.9%</span></p>
                  </div>
                </div>
                <el-row :gutter="14">
                  <el-col :span="12">
                    <div class="left-bar-item">
                      <h4>累计买家人数</h4>

                      <div class="num-box">
                        <div v-for="item in liveData">
                          {{ item }}
                        </div>
                      </div>

                      <div class="ring_char1">
                        <ring_char1 :styleClass="{ height: '110px' }" :chartData="ring1Data" class="ring_char_box" />
                      </div>
                    </div>
                    <div class="left-bar-item">
                      <h4>累计观看人数</h4>

                      <div class="num-box">
                        <div v-for="item in liveData">
                          {{ item }}
                        </div>
                      </div>

                      <div class="ring_char1">
                        <ring_char1 :styleClass="{ height: '110px' }" :chartData="ring1Data" class="ring_char_box" />
                      </div>
                    </div>



                  </el-col>
                  <el-col :span="12">
                    <!-- 粉丝画像 -->
                    <img style="width: 100%; height: 100%;" src="@/assets/images/screen/zhanwei1.png" alt="">
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>

          <!-- 第二层 -->
          <el-row class="screen-right-item-level h_auto466" :gutter="14" justify="space-evenly">

            <el-col :span="12">
              <div class="product-top-10 screen-border-style h_auto70">
                <h3 class="screen-title-box">单品销售利润排行榜</h3>
                <el-table class="topTable product-top-table" v-loading="loading" :data="personData">
                  <el-table-column label="排名" align="center" min-width="80" type="index" :index="indexMethod" />
                  <el-table-column label="品名" align="center" prop="name" />
                  <el-table-column label="点击量" align="center" prop="dingdan" />
                  <el-table-column label="销量" align="center" prop="num1" />
                  <el-table-column label="订单量" align="center" prop="num2" />
                  <el-table-column label="成交金额" align="center" prop="num3" />
                  <el-table-column label="未支付订单" align="center" prop="num2" />
                  <el-table-column label="订单支付率" align="center" prop="num1" />
                </el-table>
              </div>
            </el-col>

            <el-col :span="12">
              <div class="product-top-10 chars-box screen-border-style h_auto70">
                <h3 class="screen-title-box">单品详情</h3>

                <el-row class="" :gutter="20" justify="space-evenly">
                  <el-col :span="9">
                    <div class="chars-item-box pt20">
                      <div class="left-title">成交转化率</div>
                      <div class="zhuanhua-box">
                      </div>
                    </div>

                  </el-col>
                  <el-col :span="15">
                    <div class="chars-item-box">
                      <div class="right-title">累计支付人数</div>
                    </div>
                    <line_char4 :styleClass="{ height: '150px' }" :chartData="ring1Data" class="ring_char_box" />
                  </el-col>

                  <el-col :span="5">
                    <div class="chars-item-box">
                      <div class="left-title">人群画像</div>
                    </div>
                    <ring_char1 :styleClass="{ height: '130px' }" :chartData="ring1Data" class="ring_char_box" />
                  </el-col>
                  <el-col :span="5">
                    <ring_char1 :styleClass="{ height: '130px' }" :chartData="ring1Data" class="ring_char_box" />

                  </el-col>
                  <el-col :span="5">
                    <ring_char1 :styleClass="{ height: '130px' }" :chartData="ring1Data" class="ring_char_box" />
                  </el-col>
                  <el-col :span="9">
                    <div class="chars-item-box">
                      <div class="right-title">人群画像</div>
                    </div>
                    <line_char2 :styleClass="{ height: '150px' }" :chartData="ring1Data" class="ring_char_box" />
                  </el-col>

                  <el-col :span="15">
                    <div class="chars-item-box">
                      <div class="right-title">常买品类偏好</div>
                    </div>
                    <line_char2 :styleClass="{ height: '190px' }" :chartData="ring1Data" class="ring_char_box" />
                  </el-col>
                  <el-col :span="9">
                    <div class="chars-item-box">
                      <div class="right-title">地域分布</div>
                    </div>
                    <bar_char1 :styleClass="{ height: '190px' }" :chartData="ring1Data" class="ring_char_box" />
                  </el-col>
                </el-row>

              </div>
            </el-col>
          </el-row>

        </div>
      </el-col>


    </el-row>
  </div>
</template>

<script setup name="User" lang="ts">
import { listUser, getUser, delUser, addUser, updateUser } from '@/api/system/hmUser';
import { UserVO, UserQuery, UserForm } from '@/api/system/hmUser/types';
import { hmSupplierList, hmSupplierGet, hmSupplierPut } from '@/api/group/supplier/index'

import { SupplierTable } from '@/api/group/supplier/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { AddressInfoVO, AddressInfoQuery, AddressInfoForm } from '@/api/system/addressInfo/types';
import { validateSpaceAndEmoji } from '@/utils/validate'

import mqtt from "./mqtt.vue";
import { QuestionFilled } from '@element-plus/icons-vue'
import ring_char1 from "./echarts/ring_char1.vue";
import line_char1 from "./echarts/line_char1.vue";
import line_char2 from "./echarts/line_char2.vue";
import line_char3 from "./echarts/line_char3.vue";
import line_char4 from "./echarts/line_char4.vue";
import bar_char1 from "./echarts/bar_char1.vue";
import liquidfill_char1 from "./echarts/liquidfill_char1.vue";
import icon_tuidingdanlv from '@/assets/images/screen/icon_tuidingdanlv@2x.png';
import icon_chengjiaodingdanshu from '@/assets/images/screen/icon_chengjiaodingdanshu@2x.png';



import { ref, onMounted, onUnmounted } from 'vue';
// 当前日期
const currentTime = ref(new Date().toLocaleTimeString());

const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

const updateTime = () => {
  currentTime.value = new Date().toLocaleTimeString();
};

// 今日周几
const weekDay = computed(() => {
  const dayNumber = new Date().getDay();
  return weekDays[dayNumber];
});

onMounted(() => {
  // getList(); 
})
updateTime();
const intervalId = setInterval(updateTime, 1000);
onUnmounted(() => clearInterval(intervalId));

const screenTitle = ref('惠麦销售数据统计大屏- 详情');
const liveData = ref('0985444');
const numData = ref('001234元');
let nums1 = ref(100)
let nums3 = ref(80)
let barWidth: any = computed(() => { return (nums3.value / nums1.value * 100).toFixed(2) })
const personData = reactive([{
  'id': 1,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,

},
{
  'id': 2,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,
},
{
  'id': 3,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,
},
{
  'id': 4,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,
},
{
  'id': 5,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,
},
{
  'id': 6,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,
},
{
  'id': 7,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,
},
{
  'id': 8,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,
},
{
  'id': 9,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,
}, {
  'id': 10,
  'name': '商品名',
  'dingdan': '5000',
  'num1': 100,
  'num2': 100,
  'num3': 100,
},



])
const ring1Data = reactive([{
  'value': 10,
  'name': '新客',
}, {
  'value': 20,
  'name': '老客',
}
])

const ring2Data = reactive([{
  'value': 252,
  'name': '粉丝',
}, {
  'value': 60,
  'name': '非粉丝',
}
])

const ring3Data = reactive([{
  'value': 252,
  'name': '分类1',
}, {
  'value': 60,
  'name': '分类2',
}, {
  'value': 152,
  'name': '分类3',
}, {
  'value': 620,
  'name': '分类4',
}, {
  'value': 352,
  'name': '分类5',
}, {
  'value': 460,
  'name': '分类6',
}, {
  'value': 812,
  'name': '分类7',
}, {
  'value': 760,
  'name': '分类8',
}
])

const userList = ref<UserVO[]>([]);
const loading = ref(false);

const total = ref(0);
const infoData: UserForm = reactive({})


const initFormData: UserForm = {
  userId: undefined,
  deptId: undefined,
  userName: undefined,
  nickName: undefined,
  userType: undefined,
  email: undefined,
  phonenumber: undefined,
  sex: undefined,
  avatar: undefined,
  password: undefined,
  status: undefined,
  loginIp: undefined,
  loginDate: undefined,
  remark: undefined,
  supplier: undefined,
  contactName: undefined,
  gender: undefined,
  phone: undefined,
  wechat: undefined,
  department: undefined,
  position: undefined,
  counterpart: undefined,
  createdAt: undefined
}
const data = reactive<PageData<UserForm, UserQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    deptId: undefined,
    userName: undefined,
    nickName: undefined,
    userType: undefined,
    email: undefined,
    phonenumber: undefined,
    sex: undefined,
    avatar: undefined,
    password: undefined,
    status: undefined,
    loginIp: undefined,
    loginDate: undefined,
    supplier: undefined,
    contactName: undefined,
    gender: undefined,
    phone: undefined,
    wechat: undefined,
    department: undefined,
    position: undefined,
    counterpart: undefined,
    createdAt: undefined,
  },
  rules: {
    userId: [
      { required: true, message: "用户ID不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    deptId: [
      { required: true, message: "部门ID不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    userName: [
      { required: true, message: "用户账号不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    nickName: [
      { required: true, message: "用户昵称不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    userType: [
      { required: true, message: "用户类型不能为空", trigger: "change" }
    ],
    email: [
      { required: true, message: "用户邮箱不能为空", trigger: "blur" }
    ],
    phonenumber: [
      { required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
    ],
    sex: [
      { required: true, message: "用户性别不能为空", trigger: "change" }, { validator: validateSpaceAndEmoji, }
    ],
    avatar: [
      { required: true, message: "头像地址不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    password: [
      { required: true, message: "密码不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    status: [
      { required: true, message: "帐号状态不能为空", trigger: "change" }
    ],
    loginIp: [
      { required: true, message: "最后登录IP不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    loginDate: [
      { required: true, message: "最后登录时间不能为空", trigger: "blur" }
    ],
    remark: [
      { required: true, message: "备注不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    supplier: [
      { required: true, message: "供应商名称不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    contactName: [
      { required: true, message: "联系人姓名不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    gender: [
      { required: true, message: "性别不能为空", trigger: "blur" }
    ],
    phone: [
      { required: true, message: "联系电话不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }
    ],
    wechat: [
      { required: true, message: "微信不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    department: [
      { required: true, message: "部门不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    position: [
      { required: true, message: "职位不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    counterpart: [
      { required: true, message: "对接人不能为空", trigger: "blur" }, { validator: validateSpaceAndEmoji, }
    ],
    createdAt: [
      { required: true, message: "创建时间不能为空", trigger: "blur" }
    ]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询用户信息列表 */
const getList = async () => {
  loading.value = true;
  const res = await hmSupplierList(queryParams.value);
  userList.value = res.rows;
  total.value = res.total;
  Object.assign(infoData, res.rows[0])
  loading.value = false;
}

const indexMethod = (index: number) => {

  return index == 0 ? `TOP.${index + 1}` : `NO.${index + 1}`
}

</script>

<style lang="scss" scoped>
.mb40 {
  margin-bottom: 40px;
}

.mt17 {
  margin-top: 17px;
}

.mb6 {
  margin-bottom: 6px;
}

.mb30 {
  margin-bottom: 30px !important;
}

.pt20 {
  padding-top: 20px;
}

.font-color-yellow {
  color: #FFDF72 !important;
}

.h466 {
  height: 466px !important;
}

.h458 {
  height: 458px !important;
}

.h226 {
  height: 226px !important;
}

.h_auto100 {
  height: calc(100% - 10px) !important;
}

.h_auto70 {
  height: calc(100% - 70px) !important;
}


.h_auto466 {
  height: calc(100% - 464px) !important;
}

.big-screen-box-details {
  position: relative;
  background: url("@/assets/images/screen/icon_beijing.png");
  // background: #ccc;
  background-size: cover;
  color: #66FFFF;
  height: 100%;
  width: 100%;
  padding: 0 7px;
  box-sizing: border-box;
  overflow: hidden;

  .back-btn {
    // border: 1px solid #66FFFF;
    width: 80px;
    height: 30px;
    color: #66FFFF;
    background: none;
    background: #0935B7;
    border: 1px solid #0E5DFB;
    // font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    border-radius: 0;
    position: fixed;
    top: 70px;
    left: 40px;
    z-index: 100;
  }

  .el-table--fit {
    background: none;
  }

  // .product-top-table {
  //   :deep(.cell) {
  //     // height: 63px;
  //     // line-height: 63px;
  //     box-sizing: border-box;
  //     // font-weight: 600;
  //     // font-size: 24px;
  //   }
  // }

  .screen-header {
    height: 130px;
    background: url("@/assets/images/screen/icon_toubu@2x.png");
    background-size: 100% 100%;

    .left-date-box {
      background: url("@/assets/images/screen/icon_riqi@2x.png") 100% no-repeat;
      background-size: 100% 100%;
      height: 78px;
      max-width: 308px;
      margin: 0 auto;
      position: relative;
      top: 24px;

      p {
        margin: 0;
        line-height: 34px;
      }

      .date-p {
        font-size: 16px;
        text-indent: 2em;
      }

      .week-p {
        font-size: 12px;
        text-align: right;
        margin-right: 2em;
      }
    }

    .right-date-box {
      height: 60px;
      max-width: 406px;
      background: url("@/assets/images/screen/icon_zhouqi@2x.png") 100% no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding-left: 14px;
      font-size: 14px;
      position: relative;
      top: 24px;

      .el-button--primary.is-plain {
        border: 1px solid #66FFFF;
        color: #66FFFF;
        background: none;
      }
    }

    .screenTitle {
      // width: 600px;
      text-align: center;
      height: 40px;
      font-family: AlibabaSansKR, AlibabaSansKR;
      font-weight: bold;
      font-size: 40px;
      color: #FFFFFF;
      line-height: 2px;
      letter-spacing: 3px;
      font-style: normal;
    }


  }

  .screen-title-box {
    background: url("@/assets/images/screen/icon_wenzikuang@2x.png") 100% no-repeat;
    background-size: 100% 100%;
    width: 162px;
    height: 32px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 32px;
    margin: 0 auto;
    position: relative;
    top: -1px
  }

  .screen-left-bar {
    // min-height: 1080px;
    height: calc(100vh - 140px);
    // padding-top: 95px;
    position: relative;
    // box-sizing: border-box;

    // height: calc(100vh - 214px);
    .bar-item-two {
      width: 100%;
      padding: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;


      &>div {
        width: 152px;
        height: 55px;
        background: url("@/assets/images/screen/icon_renshukuang@2x.png") 100% no-repeat;
        background-size: 100% 100%;
        padding: 6px 12px;
        box-sizing: border-box;
        margin-bottom: 12px;

        &>p {
          margin: 8px 0;
        }

        .title {
          font-weight: 600;
          font-size: 13px;
          color: #FFFFFF;
          line-height: 13px;
        }

        .nums {
          font-weight: bold;
          font-size: 17px;
          color: #66FFFF;
          line-height: 17px;
          letter-spacing: 1px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          &>span:nth-child(2) {
            font-size: 13px;
            color: #66FFFF;
            line-height: 13px;
          }
        }
      }
    }

    .left-bar-item {
      h4 {
        font-weight: 600;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 12px;
        text-align: center;
      }

      .num-box {
        display: flex;
        justify-content: space-evenly;

        div {
          width: 40px;
          height: 40px;
          background: url("@/assets/images/screen/icon_shuzikuang@2x.png") 100% no-repeat;
          background-size: 100% 100%;
          font-size: 30px;
          color: #66FFFF;
          line-height: 40px;
          font-style: normal;
          text-align: center;
        }
      }

      .bar-item-three {
        padding: 14px;

        &>div {
          // width: 152px;
          // height: 55px;
          background: url("@/assets/images/screen/icon_renshukuang@2x.png") 100% no-repeat;
          background-size: 100% 100%;
          padding: 6px 12px;
          box-sizing: border-box;
          margin-bottom: 12px;

          &>p {
            margin: 8px 0;
          }

          .title {
            font-weight: 600;
            font-size: 13px;
            color: #FFFFFF;
            line-height: 13px;
          }

          .nums {
            font-weight: bold;
            font-size: 17px;
            color: #66FFFF;
            line-height: 17px;
            letter-spacing: 1px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &>span:nth-child(2) {
              font-size: 13px;
              color: #66FFFF;
              line-height: 13px;
            }
          }
        }
      }





      .ring_char_box {
        width: 100%;
      }
    }
  }

  .screen-border-style {
    width: 100%;
    border: 2px solid #1D74F1;
    border-radius: 0px 0px 10px 10px;
    position: relative;
    overflow: hidden;
  }

  .screen-border-style::before {
    content: " ";
    width: 6px;
    height: 15px;
    background: #0E5FFF;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .screen-border-style::after {
    content: " ";
    width: 6px;
    height: 15px;
    background: #0E5FFF;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;

  }

  .screen-right-box {
    height: calc(100vh - 140px);


    .screen-right-item-level {
      height: auto;
      overflow: hidden;

      .level-top-box {

        .level-top-left-box {
          width: 40%;
          padding: 26px 15px;

          .level-top-left-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #66FFFF;
            line-height: 20px;


            span {
              margin-right: 20px;
            }
          }

          .num-box {
            display: flex;
            justify-content: space-evenly;
            // padding: 0 10px;
            margin-top: 26px;

            div {
              margin-right: 6px;
              width: 65px;
              height: 72px;
              background: url("@/assets/images/screen/icon_dashuzikuang@2x.png") 100% no-repeat;
              background-size: 100% 100%;
              font-size: 54px;
              color: #66FFFF;
              line-height: 72px;
              font-style: normal;
              text-align: center;
            }
          }
        }

        .progress-bar-info {
          margin-top: 20px;
          width: 300px;
          display: flex;
          justify-content: space-between;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 14px;

          &>span {
            color: #fff;
          }
        }

        .progress-bar {
          width: 300px;
          height: 12px;
          margin-top: 9px;
          background: #033294;
          border-radius: 12px;
          display: flex;
          // justify-content: flex-end;
          align-items: center;
          // flex-direction: column;
          // padding: 0 5px;
          overflow: hidden;

          .progress-bar-item {
            height: 10px;
            background: url("@/assets/images/screen/icon_mubiao.png") 100% no-repeat;
            background-size: 100% 100%;
          }

          .progress-bar-item-box {
            width: 4px;
            height: 8px;
            margin-right: 2px;
            background: linear-gradient(180deg, #0D92FB 0%, #5B43FF 100%);
            border-radius: 1px;
            margin-bottom: 1px;

          }
        }


        .level-top-right-box {
          flex: 1;

        }

        .bar-item-four {
          padding: 14px 0;
          display: flex;
          flex-wrap: wrap;

          &>div {
            width: calc(25% - 15px);
            height: 57px;
            // width: 152px;
            // height: 55px;
            background: url("@/assets/images/screen/icon_renshukuang@2x.png") 100% no-repeat;
            background-size: 100% 100%;
            padding: 10px;
            box-sizing: border-box;
            margin-right: 15px;
            margin-bottom: 10px;

            &>p {
              margin: 0 0 5px;
            }

            .title {
              font-weight: bold;
              font-size: 14px;
              color: #FFFFFF !important;
              line-height: 14px;
            }

            .nums {
              font-weight: bold;
              font-size: 18px;
              color: #FFDF72;
              line-height: 18px;

              &>span:nth-child(2) {
                font-size: 13px;
                color: #66FFFF;
                line-height: 13px;
              }
            }

            .el-icon {
              position: relative;
              top: 1px;
            }
          }
        }

        .level-top-left-box2 {
          width: 35%;
          padding: 15px;
          box-sizing: border-box;

          .level-top-left-box-content {
            height: 54%;

            // background-color: red;
            .level-top-left-box-title {
              font-size: 14px;
              color: #FFFFFF;
              line-height: 14px;
              margin-bottom: 10px;
            }

            .hover-font-yellow {
              div:hover {
                color: #F2CA00;

                &::before {
                  content: ' ';
                  background-color: #F2CA00;
                  height: 10px;
                  width: 10px;
                  border-radius: 5px;
                  display: inline-block;
                  margin-right: 3px;
                }
              }
            }

            .hover-font-blue {
              div:hover {
                color: #66FFFF;

                &::before {
                  content: ' ';
                  background-color: #66FFFF;
                  height: 10px;
                  width: 10px;
                  border-radius: 5px;
                  display: inline-block;
                  margin-right: 3px;
                }

              }
            }

            .level-top-left-btn-box {
              font-size: 14px;
              color: #FFFFFF;
              line-height: 14px;
              display: flex;
              flex-wrap: wrap;




              div {
                width: calc(33.33% - 10px);
                height: 30px;
                margin-right: 10px;
                margin-bottom: 10px;
                background: #1C1A5F;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
              }


            }
          }
        }

        .level-top-right-box2 {
          flex: 1;
          position: relative;
          padding-top: 40px;

          .left-10 {
            position: absolute;
            top: 0;
            left: 10%;
            z-index: 1;
          }

        }


      }

      .chars-box {
        padding: 0 20px;
        box-sizing: border-box;

        .chars-item-box {
          position: relative;
        }

        .zhuanhua-box {

          background: url("@/assets/images/screen/zhuanhua.png");
          background-size: 100% 100%;
          height: 150px;
        }

        .left-title {
          font-size: 12px;
          line-height: 12px;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
        }

        .right-title {
          font-size: 12px;
          line-height: 12px;
          position: absolute;
          right: 0;
          top: 0;
          z-index: 1;
        }
      }

      .level-left-box {


        .live-count-box {
          .live-window-box {
            width: 137px;
            height: 93px;
            background: url("@/assets/images/screen/icon_zhibochangci@2x.png") 100% no-repeat;
            background-size: 100% 100%;
            text-align: center;
            padding-top: 15px;
            box-sizing: border-box;
            margin: 0 auto;

            .nums {
              font-weight: bold;
              font-size: 42px;
              color: #66FFFF;
              line-height: 42px;
              letter-spacing: 2px;
            }

            .unit {
              font-weight: 500;
              font-size: 20px;
              color: #66FFFF;
              line-height: 20px;
            }

            .title {
              font-weight: 400;
              font-size: 16px;
              color: #FFFFFF;
              line-height: 16px;
            }

          }

          .target-box {
            width: 152px;
            height: 152px;
            // background: url("@/assets/images/screen/icon_mubiaowancheng@2x.png") 100% no-repeat;
            // background-size: 100% 100%;
            text-align: center;
            // padding-top: 65px;
            box-sizing: border-box;
            margin: 0 auto;

            .title {
              font-weight: 500;
              font-size: 10px;
              color: #FFFFFF;
              line-height: 10px;
              margin-bottom: 6px;
            }

            .nums {
              font-weight: bold;
              font-size: 18px;
              color: #FFDF72;
              line-height: 18px;
              letter-spacing: 1px;
            }
          }


        }
      }

      .person-top-10 {
        padding-top: 40px;
        position: relative;

        .screen-title-box {
          position: absolute;
          right: 10px;
          margin: 0 !important;
        }

        .person-list>:first-child {
          color: #FFDF72;
        }


        .person-list-item {
          // width: 591px;
          height: 40px;
          background: url("@/assets/images/screen/icon_xiaoshouyejikuang@2x.png") 100% no-repeat;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          padding-left: 30px;
          box-sizing: border-box;
          margin-bottom: 2px;
        }

      }

      .product-top-10 {
        .ring3-box {
          .shuzi {
            font-weight: bold;
            font-size: 24px;
            line-height: 28px;
          }

          img {
            width: 82px;
          }

          .ring3-box-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 14px;
          }
        }

        .topTable {
          :deep(.el-table__body tr:hover>td.el-table__cell) {
            background-color: #0152CC !important;
          }

          :deep(.el-table__inner-wrapper::before) {
            background-color: #051371 !important;
          }

          &:deep(.el-table__header) {
            .el-table__cell {
              background-color: #051371 !important;
              // background-color:rgba(14, 95, 255, 0.3)  !important;
              border-color: #051371 !important;
            }

            .cell {
              color: #66FFFF;
              // opacity: 0.3;
            }
          }

          &:deep(.el-table__body) {
            .el-table__row {
              .el-table__cell {
                border-color: #051D83 !important;
              }

              &.el-table__row:first-child .cell {
                color: #FFDF72 !important;

              }

              &.el-table__row:nth-child(odd) {
                background-color: #051D83 !important;

              }

              &.el-table__row:nth-child(even) {
                background-color: #051371 !important;

              }
            }



            .cell {
              color: #66FFFF;
              // opacity: 0.3;
            }
          }
        }

      }
    }

    .line_char1 {
      width: 100%;

      img {
        width: 100%;
        height: auto;
      }
    }

    .line_char2 {
      width: 100%;
      height: 200px;

      img {
        width: 97%;
        height: 170px;
      }
    }

    .ring_char1 {
      width: 100%;

      // height: 200px;
      img {
        width: 100%;
        // height: 170px;
      }
    }

  }

}
</style>
